<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="./commons/common-css.html :: commonHead('选择所属渠道')">
	<link rel="stylesheet" th:href="@{/components/zui/css/zui.min.css}">
	<meta charset="UTF-8">
</head>
<body>
<div style="height: 350px;">
	<ul id="treeUl" class="ztree"></ul>
</div>
<div style="text-align: center; height: 50px;" id="tree">
	<button type="button" @click="save" class="btn btn-success col-lg-3 col-xs-3 col-md-3 col-lg-offset-2 col-md-offset-2 col-xs-offset-2">保存</button>
	<button type="button" @click="cancel" class="btn btn-warning col-lg-3 col-xs-3 col-md-3 col-lg-offset-1 col-md-offset-1 col-xs-offset-1">取消</button>
</div>
<span th:include="./commons/common-js.html :: commonOnLoadJs"></span>
</body>
<script type="text/javascript">
var setting = {
	data: {
		simpleData: {
			enable: true,
			idKey: "id",
			pIdKey: "pid",
			rootPId: 0
		}
	},
	callback: {
		onClick: function(e, treeId, treeNode, clickFlag) {
			zTreeObj.checkNode(treeNode, !treeNode.checked, true);
			app.treeId = treeNode.id;
			app.treeName = treeNode.name;
		},
		onCheck: function(e, treeId, treeNode, clickFlag) {
			app.treeId = treeNode.id;
			app.treeName = treeNode.name;
		}
	},
	check: {
		enable: true,
		chkStyle: 'radio',
		radioType: 'all'
	}
};
const BASE_PATH = [[@{/}]];
const URLS = {
	API_URLS: {
		GETTREE: BASE_PATH+'/v1/restful/canalSystem/getCanalSystemZtree'
	}
};
var reqLayerIndex = -1;
axios.interceptors.request.use(function (config) {
	reqLayerIndex = layer.load();
	return config;
}, function (error) {
	return Promise.reject(error);
});
axios.interceptors.response.use(function(response) {
	layer.close(reqLayerIndex);
	return response;
}, function (error) {
	return Promise.reject(error.response);
});
var zTreeObj = null;
var app = new Vue({
	el: '#tree',
	data: {
		treeId: '',
		treeName: ''
	},
	methods: {
		init: function() {
			axios.get(URLS.API_URLS.GETTREE)
			.then(function (res) {
				data = res.data;
				if (data.code == 200) {
					data = data.data;
					let parentNode = {id: null, name: '唐徕渠综合渠系树'};
					let zNodes = data;
					zNodes.push(parentNode);
					zTreeObj = $.fn.zTree.init($("#treeUl"), setting, zNodes);
					let nodes = zTreeObj.getNodes();
					zTreeObj.setChkDisabled(nodes[0], true);
					zTreeObj.expandNode(nodes[0], true, null, null, true);
				}
			}).catch(function (error) {
			});
		},
		save: function() {
			parent.app.modelData.canalSystemName = app.treeName;
			parent.app.modelData.canalSystemGuid = app.treeId;
			let index= parent.layer.getFrameIndex(window.name);
			parent.layer.close(index);
		},
		cancel: function() {
			let index= parent.layer.getFrameIndex(window.name);
			parent.layer.close(index);
		}
	},
	mounted: function() {
		this.init();
	}
});
</script>
</html>